<template>
    <div class="person">
        <h2>当前求和为:{{ sum }}</h2>
        <button @click="add">点我+1</button>
    </div>
</template>

<script>

export default {
    /* eslint-disable */
    name: 'Person',
    data() {
        return {
            sum: 1
        }
    },
    methods: {
        add() {
            this.sum += 1
        }
    },
    //创建前的钩子
    beforeCreate(){
        console.log('创建前')
    },
    created(){
        console.log('创建完毕');
    },
    beforeMount(){
        console.log('beforeMount');
    },
    mounted(){
        console.log('mounted');
    },
    beforeDestroy(){
        console.log('beforedestroy');
    },
    destroyed(){
        console.log('destoryed');
    },
    beforeUpdate(){
        console.log('beforeUpdate');
    },
    updated(){
        console.log('updated');
    },

    components: {

    }
}
</script >

<style scope>
.person {
    background-color: skyblue;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}
</style>